@import '../base/reset.scss';
@import './custom.scss';
@import './font/iconfont.css';
@import '../mixins/index.scss';
html,
body{
    // height: $max-height;
    height: 100vh;
}

// html{
//   font-size: 50px;
// }
body,
html{
  background-color: #18191e;
}

#container{
  position: relative;
  min-height: $max-height;
  height: auto !important;
  height: $max-height;
}

#headerWrap,
#main,
#footerWrap{
  // position: relative;
  width: $max-width;
  .main-wrap{
    margin: 0 auto;
    width: $max-width-1024;
    padding: 0 $padding-20;
  }
}

#headerWrap{
  position: absolute;
  height: $header-height;
  line-height: $header-height;
  z-index: 100;
  background: $font-color-white;
}

#main{
  padding-top: $header-height;
  padding-bottom: $footer-height;
  // background: gold;
}

#footerWrap{
  position: absolute;
  bottom: 0px;
  height: $footer-height;
  background: $foot_bg_color;
  clear: both;
}

.ctx-wrap{
  padding: 20px;

  .mt{
    margin-top: 20px;
  }
  .mb{
    margin-bottom: 20px;
  }

  .ctx-sound-group,
  .flex-item-left,
  .flex-item-center,
  .flex-item-right{
    border-radius: 10px;
    background: #1f2025;
  }

  .ctx-sound-group{
    width: 100%;
    height: 560px;

  }

  .ctx-sound-group,
  .ctx-flex-item {

    .item-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      // height: 30px;
      padding: 25px 30px 0;
      line-height: 30px;
      // background: gold;
    }

    .item-title-left{
      color: #fff;
    }

    .icon-style{
      position: relative;
      top: 2px;
      color: #767e91;
      margin-right: 10px;
      font-size: 20px;
    }

    .item-title-right{
      color: #fff;
    }
  }

  .ctx-flex-item{
    display: flex;
    position: relative;
    width: 100%;
    height: 400px;
    // background: gold;


    .flex-item-left,
    .flex-item-right{
      width: 450px;
    }
    .flex-item-center{
      flex: 1;
      margin: 0 20px;
    }

    .btn-default{
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
    }
    .btn-active{
      background-color: #5673ff;
      color: #fff;
      border-color: #5673ff;
    }

    .item-echarts-audience{
      position: relative;
      width: 450px;
      .item-echarts-left,
      .item-echarts-right{
        position: absolute;
        left: 0;
        top: 0;
        left: 0;
        right: 0;
        opacity: 1;
        transition: .2s;
      }
      .item-echarts-right{
        opacity: 0;
        z-index: -1;
      }
      // .item-echarts-right{
      //   // left: 100%;
      // }
    }
    .item-right-active{
      .item-echarts-left{
        opacity: 0;
      }
      .item-echarts-right{
        opacity: 1;
        z-index: 10;
      }
    }
  }

  .item-height-500{
    width: 100%;
    height: 500px;
  }

  .item-height-360{
    width: 100%;
    height: 360px;
  }

  .item-height-340{
    width: 100%;
    height: 340px;
  }

  .item-height-320{
    width: 100%;
    height: 320px;
  }
}

@media all and (max-width: $max-width-750) {
  #headerWrap{
    height: px2rem($header-height-750);
    line-height: px2rem($header-height-750);
  }
  #main{
    padding-top: px2rem($header-height-750);
    padding-bottom: px2rem($footer-height-750);
  }
  #footerWrap{
    height: px2rem($footer-height-750);
  }
  #headerWrap,
  #main,
  #footerWrap {
    .main-wrap{
      width: px2rem(750);
      overflow: hidden;
      padding: 0 px2rem(30);
    }
  }
}
